<template>
  <div class="about">
    <h3>{{name}}</h3>
    <h1>翻倍{{mul}}</h1>
    <h1>{{counter}}</h1>
    <!-- <button @click="add">++</button> -->
    <!-- <button @click="decr(2)">--</button> -->
    <hr />
    <button @click="jianA(2)">--</button>
    <button @click="jiaM">++</button>
  </div>
</template>
<script>
  import {
    mapState,
    mapGetters,
    mapActions,
    mapMutations
  } from 'vuex'
  export default {
    data() {
      return {
        // counter: 0
      }
    },
    computed: {
      ...mapState(['counter','name']),
      ...mapGetters(['mul'])
    },
    mounted() {
      // {decr:f}
      console.log(mapActions({decr:'jianA'}))
    },
    methods: {
      //----------自定义-----------------------------------
      /* add() {
        // this.$store.dispatch('jiaA')
        this.$store.commit('jiaM');
      }, */
     /* decr() {
        this.$store.dispatch('jianA', 2)
     } */
      //----------通过mapActions生成方法，调用actions中的方法（对象方式）-----------------------------------
      // ...mapActions({decr:'jianA'})
      //----------通过mapActions生成方法，调用actions中的方法（数组方式）-----------------------------------
      ...mapActions(['jianA']),
      //----------通过mapMutations生成方法，调用mutations中的方法（对象方式）-----------------------------------
      // ...mapMutations({add:'jiaM'})
      ...mapMutations(['jiaM'])
    }
  }
</script>
